<route>
    {
        name:"home"
    }
</route>
<template>
    <div>
        <div class="header">
            <!-- 导航 -->
            <navView />
            <!-- 首屏 输入框和图片 -->
            <div home-container>
                <div class="input-box">
                    <!-- 选择框 select -->
                    <div class="input-box-select">
                        校招
                    </div>
                    <!-- 选择框 输入框 -->
                    <div class="input-box-form-item">
                        <input type="text">
                    </div>
                    <!-- 搜索按钮 -->
                    <div class="input-box-search">
                        搜索
                    </div>
                </div>

                <div class="keywords">
                    <span>新招岗位</span>
                    <span>热门企业</span>
                    <span>求职必读</span>
                    <span>干货文章</span>
                </div>
            </div>
            <div class="ad">
                <div home-container>
                    <el-carousel indicator-position="none" :autoplay="false" height="187px">
                        <el-carousel-item v-for="item in carousel" :key="item">
                            <div class="ad-list">
                                <div class="ad-list-item" v-for="i in item">
                                    <img :src="i.url" alt="">
                                </div>
                            </div>
                        </el-carousel-item>

                    </el-carousel>


                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import navView from 'c/nav.vue';

const { user } = axiosReq;

let carousel = ref([
    [
        { url: "/images/home/zhanwei/Frame 1698.png" },
        { url: "/images/home/zhanwei/Frame 1698.png" },
        { url: "/images/home/zhanwei/Frame 1698.png" },
    ],
    [
        { url: "/images/home/zhanwei/Frame 1698.png" },
        { url: "/images/home/zhanwei/Frame 1698.png" },
        { url: "/images/home/zhanwei/Frame 1698.png" },
    ]


])
console.log(user);
</script>


<style>
.header {
    /* height: calc(100vh - 237px); */
    height: 609px;
    background: linear-gradient(360deg, #488DF4 0%, #61AAFF 100%);
    opacity: 1;
    padding: 0.1px;
    position: relative;
}

.header::before {
    content: '';
    width: 1200px;
    /* height: calc(100vh - 237px); */
    height: 609px;
    position: absolute;
    left: calc((100vw - 1200px) /2);
    background-image: url(/images/home/Frame.png), url(/images/home/img_home_d_role.png);
    background-size: 277px 63px, 870px 610px;
    background-position: left 196px, 410px 0;
    background-repeat: no-repeat;
}
</style>
<style lang="scss" scoped>
.input-box {
    width: 535px;
    height: 52px;
    background: #FFFFFF;
    border-radius: 7px 7px 7px 7px;
    opacity: 1;
    border: 1px solid #FFFFFF;
    padding: 1px;
    margin-top: 279px;
    display: flex;

    &-select {
        display: flex;
        width: 75px;
        height: 100%;
        align-items: center;
        background-image: url(/images/home/btn_home_drop_down.png);
        background-repeat: no-repeat;
        background-size: 10px 10px;
        background-position: right center;
        color: #4062FF;
        padding-left: 22px;
        font-size: 16px;
    }

    &-form-item {
        width: 329px;
        height: 100%;
        padding: 0 10px 0 32px;

        input {
            padding: 0 10px;
            width: 100%;
            border: none;
            outline: none;
            height: 100%;
        }
    }

    &-search {
        flex: 1;
        height: 100%;
        color: #fff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #4365FF;
        border-radius: 0 7px 7px 0;

    }

}

.keywords {
    margin-top: 31px;
    display: flex;

    span {
        width: 84px;
        height: 30px;
        border-radius: 20px 20px 20px 20px;
        opacity: 1;
        border: 1px solid #FFFFFF;
        color: #fff;
        display: flex;
        margin-right: 16px;
        align-items: center;
        justify-content: center;
    }

}

.ad {
    height: 237px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    // border-radius: 6px 6px 6px 6px;
    margin-top: 216px;

    &-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0 30px;

        &-item {
            width: 384px;
            height: 187px;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            overflow: hidden;
            img {
                width: 384px;
                display: block;
                height: 187px;
            }
        }
    }

}
</style>